<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>聚光灯特效</title>
		<style>
			:root {
				--x: 0px;
				--y: 0px;
				--r: 0px;
			}
			body {
				background-color: #222;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}
			h1 {
				color: #333;
				font-family: Arial, Helvetica, sans-serif;
				margin: 0;
				padding: 0;
				font-size: 8rem;
				position: relative;
			}
			h1::after {
				content: "益达无糖口香糖标题尽量长一点";
				position: absolute;
				top: 0;
				left: 0;
				color: transparent;
				background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
				background-size: 150%;
				background-position: center center;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-clip-path: ellipse(0px 0px at 0% 50%);
				clip-path: ellipse(0px 0px at 0% 50%);
			}
			.right::after {
				-webkit-clip-path: circle(var(--r) at var(--x) var(--y));
				clip-path: circle(var(--r) at var(--x) var(--y));
			}
			.notebox {
				margin: 100px;
				border: 2px solid grey;
				padding: 15px;
				color: #fff;
			}
			.notebox h3 {
				margin: 0;
			}
			.notebox p {
				padding-bottom: 3px;
				border-bottom: 1px solid gray;
			}
		</style>
	</head>
	<body>
		<h1 id="text">益达无糖口香糖标题尽量长一点</h1>
		<div class="notebox">
			<h3>聚光灯特效</h3>
			<p>
				1.设置一个h1，和h1的伪元素。h1相对定位，伪元素绝对定位。两者设置一样的内容。
			</p>
			<p>2.background-clip:text可以只在有文字的部分显示图片</p>
			<p>
				3.因为不能通过js直接操作伪元素，新增一个类，设置该类的伪元素的clip-path。
			</p>
			<p>
				4.clip-path: circle(var(--r) at var(--x)
				var(--y)),监听mouse的enter、move、out事件，改变r、x、y的值
			</p>
			<p>
				5.鼠标移入时，设置r的值为100。鼠标移动时，动态改变x、y的值。鼠标移出时，将r的值设置为0
			</p>
		</div>
		<script>
			const textbox = document.getElementById("text")
			textbox.addEventListener("mousemove", (e) => {
				textbox.className = "right"
				let click_X = e.clientX - textbox.offsetLeft
				let click_Y = e.clientY - textbox.offsetTop
				document.body.style.setProperty("--x", click_X + "px")
				document.body.style.setProperty("--y", click_Y + "px")
				textbox.style.transition = ""
			})
			textbox.addEventListener("mouseenter", (e) => {
				document.body.style.setProperty("--r", 100 + "px")
			})
			textbox.addEventListener("mouseout", (e) => {
				document.body.style.setProperty("--r", 0 + "px")
			})
		</script>
	</body>
</html>
